import React, { Component } from 'react'

import { Form, Input, Select, Button, Row, Col } from 'antd'
const FormItem = Form.Item
const { Option } = Select
const TopForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick, advanced, resetForm, GXList }) => {
	const onHandleAdvanced = () => {
		if (onClick) {
			onClick()
		}
	}
	const formItemLayout = {
		// 抽屉里面Form。二列的布局比例
		labelCol: {
			span: 6
		},
		wrapperCol: {
			span: 16
		}
	};
	return (
		<div>
			<Form>
				<Row gutter={24}>
					<Col span={5}>
						<FormItem label='批号'{...formItemLayout}>
							{
								getFieldDecorator('batchNo', {
									getValueFromEvent: (event) => {
										return event.target.value.replace(/\s+/g, "")
									},
								})(
									<Input placeholder='请输入批号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
								)
							}
						</FormItem>
					</Col>
					<Col span={5}>
						<FormItem label='领料单号'{...formItemLayout}>
							{
								getFieldDecorator('acceptCode', {
									getValueFromEvent: (event) => {
										return event.target.value.replace(/\s+/g, "")
									},
								})(
									<Input placeholder='请输入领料单号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
								)
							}
						</FormItem>
					</Col>
					<Col span={5}>
						<FormItem label='领料状态'{...formItemLayout}>
							{
								getFieldDecorator('partReceiveStatus', {
									initialValue: '1'
								})(

									<Select allowClear={true} placeholder="请选择领料状态">
										<Option value='1'>待发布</Option>
										<Option value='2'>待确认</Option>
										<Option value='3'>未完成</Option>
										<Option value='4'>已完成</Option>
									</Select>
								)
							}
						</FormItem>
					</Col>
					<Col span={5}>
						<FormItem label='备料仓库'{...formItemLayout}>
							{
								getFieldDecorator('storeCode', {
									getValueFromEvent: (event) => {
										return event.target.value.replace(/\s+/g, "")
									},
								})(
									<Input allowClear placeholder='请输入备料仓库' onPressEnter={() => onSearch(getFieldsValue())} />
								)
							}
						</FormItem>
					</Col>
					<Col span={4} style={{ display: 'flex' }} className="serarch-btns">
						<FormItem>
							<Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
								{'查询'}
							</Button>
						</FormItem>
						<FormItem>
							<Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
								{' 展开'}
							</Button>
						</FormItem>
						<FormItem>
							<Button type="default" onClick={() => {
								resetForm()
							}}
								icon={'redo'}
							>
								{'重置'}
							</Button>
						</FormItem>
					</Col>

				</Row>
				<Row gutter={24}>
					{
						advanced ? <Col span={5}>
							<FormItem label='物料编码'{...formItemLayout}>
								{
									getFieldDecorator('partCode', {
										getValueFromEvent: (event) => {
											return event.target.value.replace(/\s+/g, "")
										},
									})(
										<Input placeholder='请输入物料编码' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
									)
								}
							</FormItem>
						</Col> : ''
					}{
						advanced ? <Col span={5}>
							<FormItem label='工序'{...formItemLayout}>
								{
									getFieldDecorator('procedureCode')(
										<Select allowClear={true} placeholder='请选择工序'>
											{
												GXList && GXList.map(item => {
													return <Option key={item.procedureCode}>{item.procedureName}</Option>
												})
											}
										</Select>
									)
								}
							</FormItem>
						</Col> : ''
					}
					{/* {
						advanced ? <Col span={5}>
							<FormItem label='图号'{...formItemLayout}>
								{
									getFieldDecorator('paperCode', {
										getValueFromEvent: (event) => {
											return event.target.value.replace(/\s+/g, "")
										},
									})(
										<Input placeholder='请输入图号' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
									)
								}
							</FormItem>
						</Col> : ''
					} */}
					{
						advanced ? <Col span={5}>
							<FormItem label='物料名称'{...formItemLayout}>
								{
									getFieldDecorator('partName', {
										getValueFromEvent: (event) => {
											return event.target.value.replace(/\s+/g, "")
										},
									})(
										<Input placeholder='请输入物料名称' allowClear onPressEnter={() => onSearch(getFieldsValue())}></Input>
									)
								}
							</FormItem>
						</Col> : ''
					}
					{
						advanced ? <Col span={5}>
							<FormItem label='物料变更'{...formItemLayout}>
								{
									getFieldDecorator('partChangeAttitude')(
										<Select allowClear={true} placeholder='请选择物料变更'>
											<Option value='1'>物料新增</Option>
											<Option value='2'>物料取消</Option>
											<Option value='3'>物料属性变化</Option>
											<Option value='4'>回仓</Option>
										</Select>
									)
								}
							</FormItem>
						</Col> : ''
					}
				</Row>
				<Row gutter={24}>	
					{/* {
						advanced ? <Col span={5}>
							<FormItem label='成品状态'{...formItemLayout}>
								{
									getFieldDecorator('accomplishState', {
										initialValue: '未入库'
									})(
										<Select allowClear={true}>
											<Option value='全部'>全部</Option>
											<Option value='未入库'>未入库</Option>
											<Option value='已入库'>已入库</Option>
										</Select>
									)
								}
							</FormItem>
						</Col> : ''
					} */}
				</Row>
			</Form>
		</div>
	)
}
export default Form.create()(TopForm);
